<template>
  <div>
    <grimm-page type="button-view" title="image-picker" style="background: #fff">
      <template slot="content">
        <h1 class="example-page-title">限制上传数量(30)张</h1>
        <grimm-image-picker
          :files="files1"
          @onChange="changeFile"
          length="3"
          multiple
          :max-size="60"
          maxLength="30"
        />
        <h1 class="example-page-title">只上传一张</h1>
        <grimm-image-picker
          :files="files2"
          @onChange="changeFile2"
          length="1"
          :max-size="60"
          oneStatus
        />
      </template>
    </grimm-page>
  </div>
</template>

<script>
import GrimmPage from '../../components/GrimmPage.vue';
export default {
  components: {
    GrimmPage,
  },
  data() {
    return {
      files1: [
        {
          url: 'https://img.yzcdn.cn/vant/apple-1.jpg',
          id: 1,
        }, {
          url: 'https://img.yzcdn.cn/vant/apple-2.jpg',
          id: 2,
        }, {
          url: 'https://img.yzcdn.cn/vant/apple-3.jpg',
          id: 3,
        }, {
          url: 'https://img.yzcdn.cn/vant/apple-4.jpg',
          id: 4,
        }, {
          url: 'https://img.yzcdn.cn/vant/apple-4.jpg',
          id: 5,
        },
      ],
      files2: [],
    }
  },
  methods: {
    changeFile({files, type, index}) {
      console.log(files, type, index)
    },
    changeFile2({files, type, index}) {
      console.log(files, type, index)
    },
  }
}
</script>

<style lang="stylus">

</style>